<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识过度</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 80%;
            margin: 100px auto;
            margin-bottom: none;
            padding: 0;
        }
        .box .btn{
            margin: 0 auto;
            display: block;
            width: 100px;
            height: 50px;
            background: rgb(59, 138, 169);
            color: white;
            font-size: 15px;
            line-height: 50px;
            border: none;
            border-radius: 16px;
            transition: 2s;
            /* transition: width 2s; */
            /* transition: background 2s; */
            transition-property: width,background,font-size;   /* 过度要控制的属性名 */
        }
        .box .btn:hover{
            width: 200px;
            background: red;
            font-size: 20px;
            /* transition: background 2s; */
        }
    </style>
</head>
<body>
    <div style="height: 200px;">
        <p>过度：是指元素从一种样式逐渐变成另一种样式的一种效果。是两种样式相互替换的一个过渡过程。</p>
        <p>使用transition 属性设置过度。</p>
        <p>语法为：transition: width  3s; width表示要控制的属性名 3s 表示过度的时间。当没有属性名时，控制的是所有样式的变化。</p>
        <p>过度，必须要触发一个事件，而动画不需要触发事件也可以发生。</p>
        <p>过度的四大要素：</p>
        <p>1、要控制 CSS的属性名。可选。</p>
        <p>2、完成整个过度所需要的时间。必须要。</p>
        <p>2、过度速度曲线，用来改变过度的速率的变化，默认是先变快后变慢。可选。过度曲线变化也可以自定义一个函数来定义过度的速率。</p>
        <p>4、过度延迟时间。通过 transition-delay 属性设置。</p>
    </div>
    <div>
        <div class="box">
            <button class="btn">按钮</button>
        </div>
    </div>
</body>
</html>